<template>
  <table-tool 
    ref="TableToolRef"
    :httpInfo="httpInfo"
    :pageName="pageName"
    :tableConfig="tableConfig"
    :btnConfig="btnConfig"
    :dialogInfo="dialogInfo"
    :rules="rules"
    @setDialogMod="setDialogMod"
  >
    <!-- 搜索框 -->
    <template #searchSlot>
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item prop="name" label="打分名">
          <el-input size="small" v-model="searchInfo.name" placeholder="打分名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetSearch">
            <el-icon class="icon"><elementRefresh/></el-icon> 
            <span class="icon-font">刷新</span>
          </el-button>
          <el-button size="small" type="primary" @click="onSearch">
            <el-icon class="icon"><elementSearch/></el-icon> 
            <span class="icon-font">搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 添加修改框 -->
    <template #dialogSlot>
      <el-form-item label="打分方式名" prop="name">
        <el-input size="small" v-model="dialogInfo.name" placeholder="请填写打分方式名" autocomplete="off" clearable></el-input>
      </el-form-item>
			<el-form-item label="分数等级个数" prop="num">
        <el-input size="small" type="number" min="1" max="5" v-model="dialogInfo.num" placeholder="请填写分数等级个数" autocomplete="off" clearable></el-input>
      </el-form-item>
      <div v-if="dialogInfo.num > 1">
        <el-row>
          <el-col :span="8"><div class="typeDiv">等级</div></el-col>
          <el-col :span="8"><div class="typeDiv">分数</div></el-col>
          <el-col :span="8"><div class="typeDiv">数量限制</div></el-col>
        </el-row>
        <el-row v-for="(i,index) in arrNum" :key="i" gutter="30">
          <el-col :span="8"><div class="typeDiv"><el-input size="small" v-model="dialogInfo.typeArr[index].sname" placeholder="请填写等级" autocomplete="off" clearable></el-input></div></el-col>
          <el-col :span="8"><div class="typeDiv"><el-input size="small" v-model="dialogInfo.typeArr[index].score" placeholder="请填写分数" autocomplete="off" clearable></el-input></div></el-col>
          <el-col :span="8"><div class="typeDiv"><el-input size="small" v-model="dialogInfo.typeArr[index].maxnum" placeholder="请填写数量限制" autocomplete="off" clearable></el-input></div></el-col>
        </el-row>
      </div>
    </template>
  </table-tool>
</template>

<script>
import { reactive, ref, watch } from 'vue';
import TableTool from '/@/components/table/index.vue'
export default {
  components:{
    TableTool,
  },
  setup () {

    const pageName = '打分类型'

    const searchInfo =  reactive({
      name:'',
    })
    const tpyearr = ref([])
    const initInfo = {
      id:'',
      name:'',
      num: '',
      typeArr:[]
    }
    let rules = ref({
      name: [{ required: true, message: '请输入打分方式名', trigger: 'blur' }],
      num: [{ required: true, message: '请输入分数等级个数', trigger: 'blur' }]
    })
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['edit','del']
    })
    const btnConfig = reactive({
      showAddBtn: true,
      showdeleteBtn: true,
      showImportBtn: false,
      showExportBtn: false,
      fileType: 'atype', // 下载文件模板类型
      acceptType: '.xls,.xlsx', // 文件类型
      action: '/admin/upload/atype', // 文件上传地址
      limits: 1, // 上传数量限制
    })
    const httpInfo = reactive({
      listUrl: '/admin/atype/getList',
      deleteUrl: '/admin/atype/remove',
      saveUrl: '/admin/atype/save',
      updateUrl: '/admin/atype/update',
    })

    const TableToolRef = ref()
    const searchForm = ref()
    let dialogInfo = reactive(initInfo)

    let arrNum = ref([])

    watch(() => dialogInfo.num, (newVal) => { // 监控属性
      arrNum.value = []
      dialogInfo.typeArr.splice(0, dialogInfo.typeArr.length);
      for (let index = 1; index <= newVal; index++) {
        arrNum.value.push(index)
        dialogInfo.typeArr.push({
          sname:'',
          score:'',
          maxnum:'',
        })
      }
    })


    const onSearch = () => { // 搜索
      TableToolRef.value.searchBtn(searchInfo)
    }

    const resetSearch = () => { // 刷新
      searchForm.value.resetFields()
			TableToolRef.value.searchBtn(searchInfo)
    }

    const setDialogMod = (nowInfo) =>{
      if (nowInfo == {}) {
        dialogInfo = initInfo
      }else{
        for (const [key, val] of Object.entries(nowInfo)) { 
          dialogInfo[key] = val
        }
      }
    }


    return{
      dialogInfo,
      rules,
      httpInfo,
      pageName,
      searchInfo,
      TableToolRef,
      searchForm,
      tableConfig,
      btnConfig,
      tpyearr,
      arrNum,
      setDialogMod,
      resetSearch,
      onSearch,
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item{
  vertical-align: top;
}
.typeDiv{
  text-align: center;
}
</style>